<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改资料</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" th:href="@{../pages/img/logo.jpg.ico}" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" th:href="@{../css/bootstrap.min.css}">
    <script type="text/javascript">
        window.onload=function (){
            document.getElementById("uUsername").onblur=function (){
                var xhr=new XMLHttpRequest();
                var uid=document.getElementById("uId").value;
                xhr.open("get","/movie/checkRepeat?uId="+uid+"&uUsername="+this.value,true);
                xhr.send();
                xhr.onreadystatechange=function (){
                    if (xhr.readyState=4 && xhr.status==200){
                        var result=xhr.responseText;
                        document.getElementById("showSpan1").innerText=result;
                    }
                }
            };
            document.getElementById("uPhoneNum").onblur=function (){
                var xhr=new XMLHttpRequest();
                 xhr.open("get","/movie/checkPhoneNum?uPhoneNum="+this.value,true);
                 xhr.send();
                 xhr.onreadystatechange=function (){
                     if (xhr.readyState=4 && xhr.status==200){
                         var result=xhr.responseText;
                         document,getElementById("showSpan2").innerText=result;
                     }
                 }
            };
        }

    </script>
</head>
<body class="container">
<br>
<br>
<div class="alert alert-info"><h5>修改我的资料</h5></div>
<br>

<form th:action="@{/movie/modification/update}" th:object="${user}" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label">ID: </label>
        <div class="col-sm-5">
            <input type="text" id="uId" name="uId" th:value="${user.UId}" class="form-control" readonly>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2" control-label>账号； </label>
        <div class="col-sm-5">
            <input type="text" id="uUsername" name="uUsername" th:value="*{uUsername}" class="form-control" required>
            <span id="showSpan1"></span>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">姓名；</label>
        <div class="col-sm-5">
            <input type="text" id="uName" th:value="*{uName}" class="form-control" required>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">性别；</label>
        <div class="col-sm-5">
            <select id="uSex" th:name="uSex" th:value="*{uSex}" class="form-control">
                <option th:value="男" th:text="男">男</option>
                <option th:value="女" th:text="女">女</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">手机号：</label>
        <div class="col-sm-5">
            <input type="text" id="uPhoneNum" name="uPhoneNum" th:value="*{uPhoneNum}" class="form-control" required>
            <span id="showSpan2"></span>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">密码：</label>
        <div class="col-sm-5">
            <input type="text" id="uPassword" name="uPassword" th:value="*{uPassword}" class="form-control" required>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <input type="submit" value="提交" class="btn btn-info">
        </div>
    </div>

</form>

</body>
</html>